<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>骡窝日报详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/all.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <link rel="stylesheet" href="/css/mobile+css+head_mobile+css+ui%5EYVw%5E1526627473.css"/>
    <link rel="stylesheet" href="/css/mobile+css+head_mobile+css+ui_mobile+css+head_rem%5EZ1w%5E1535539097.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/plugins/alertPopShow.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/index.css" rel="stylesheet">
    <script src="/js/common.js"></script>
    <script>
        $(function () {
        var params = getParams();
            $.post("/dailies/browse/"+params.id);
            //获取日志的id
            //评论需要登录,通过user来判断是否已经登录
            var user = JSON.parse(sessionStorage.getItem("user"));
            if (params.id) {
                //会显
                if(user) {
                    $("#userId").val(user.id);
                    $("#dailyId").val(params.id);
                }
                $("#mySubmit").click(function () {
                    var size = $("#commentContent").val().length;
                    if (size >= 6) {
                        if (user !=null) {
                            $("#commentFrom").ajaxSubmit(function (data) {
                                if (data.succeed) {
                                    $(document).dialog({
                                        autoClose: 1000,
                                        content: '评论成功',

                                    });
                                    //提交完成后刷新
                                    setTimeout(function () {
                                        window.location.reload();
                                    },1000)

                                }


                            })
                        } else {
                            //如果没有当前用户说明没有登录
                            $(document).dialog({
                                autoClose: 1500,
                                content: '你必须登录才可以评论',
                            });
                        }
                    } else {
                        $(document).dialog({
                            autoClose: 1500,
                            content: '至少输入6个字',
                        });
                    }

                })

                //分页
                var currentPage = 1;
                var pages;
                var store = [];

                //界面显示
                function query() {
                    //发送ajax请求后台数据
                    $.get("/dailies/" + params.id + "/comments", {currentPage: currentPage}, function (data) {
                        if(data.size==0){
                            $("#msg").html("暂无评论,快来抢沙发吧")
                        }
                        $.merge(store, data.list);
                        var datas = {"list": store};
                        console.log(datas);
                        $("#comments_list").renderValues(datas, {
                            getHref: function (item, value) {
                                $(item).attr("href", $(item).data("href") + value);
                            }
                        });

                        pages = data.pages;
                    });
                    currentPage++;
                }

                //默认查询一次
                query();
                //滚动条事件
                $(window).scroll(function () {
                    //页面滑动查询
                    if (($(window).height() + $(document).scrollTop()) >= $(document).height() - 1) {
                        if (currentPage <= pages) {
                            query();
                        } else {
                            $(document).dialog({
                                type: 'notice',
                                content: '<span class="info-text">加载完成</span>',
                                autoClose: 1500
                            });
                        }
                    }
                });
            }

          /*  //查询内容
            $.get("/dailies/"+params.id+"/content",function (data) {
                console.log(data);
            })*/




            $.get("praises/dailies/"+params.id,{state:2},function (data) {
                if(data){
                    console.log(data);
                    $("#collectBtn").removeClass("fa fa-star-o fa-2x").addClass("fa fa-star fa-2x");
                }
            });

            $("#collectBtn").click(function () {
                var item = $(this);
                if (!user) {
                    $(document).dialog({
                        type: 'notice',
                        infoText: '请登录了在点赞*_*!',
                        autoClose: 1000,
                        position: 'bottom'  // center: 居中; bottom: 底部
                    });
                    return;
                }else{
                    $.get("/praises/dailies/"+params.id,{state:2},function (data){
                        console.log(data);
                       var obj={
                            state:2,
                            dailyId:params.id,
                            userId:user.id

                        };
                        if(data){
                            $.ajax({
                                url: '/praises/dailies?dailyId='+params.id+'&userId='+user.id+'&state='+2,
                                method: 'delete',
                                success: function () {
                                    item.removeClass("fa fa-star fa-2x").addClass("fa fa-star-o fa-2x");
                                }
                            });
                        }else{
                            $.post("/praises/dailies",obj,function (data) {
                                $("#collectBtn").removeClass("fa fa-star-o fa-2x").addClass("fa fa-star fa-2x");
                            })
                        }
                    })
                }
            })
        });
    </script>


</head>

<body>
    <div class="search-head" style="background: white;height: 35px">
        <div class="row nav-search">
            <div class="col" style="height: 40px;position: absolute;top:-5px;left: -15px">
                <a href="javascript:void(window.history.length > 1 ? window.history.back() : document.location.href='index.html')">
                    <img src="/img/back.jpg" width="10%" height="100%">
                </a>
            </div>
            <div class="col">
            </div>
        </div>
    </div>

    <div class="articles">
        <img class="cover" render-src="coverUrl" width="100%" height="100%">
        <div class="container">
            <br/>
            <small>
                <span render-html="createTime"></span>
                <div class="row">
                    <div class="col-4">
                        <span class="type" render-html="newsCatalog.name"></span>
                    </div>
                    <div class="col-4">
                        <span style="font-size: 15px ">By 骡窝窝官方</span>
                    </div>
                    <div class="col-4" style="font-size: 15px;text-align: right">
                        <i class="fa fa-star-o fa-2x" id="collectBtn" style="color: #ffd700;font-size: 15px"></i>收藏
                    </div>
                        <!--<span style="text-align: center" render-html="title"></span>-->
                </div>
            </small>

        </div>

        <div class="container">
            <h6 class="title" render-html="title" style="text-align: center"></h6>
            <div class="content" render-html="dailyContent.content">
            </div>
        </div>

        <hr>

    </div>




    <!--王殿强 下面是我写的 你不要把我的覆盖了-->
    <div style="text-align: center">
        <HR>
        <p>骡窝窝版权所有</p>
    </div>

    <div>
        <form action="/dailies" method="post" id="commentFrom" style="text-align: center">
            <div style="text-align: center">
        <textarea id="commentContent" name="content"
                  style="width: 90%;height: 100px;font-size: 10px;text-align: left;border: solid 1px black"
                  class="form-control-lg" placeholder="说点什么吧"></textarea>
            </div>

            <input type="hidden" name="user.id" id="userId">
            <input type="hidden" name="daily.id" id="dailyId">
        </form>
        <div style="text-align: center">
            <button style="width:100px;height:35px;line-height:35px;text-align: center"
                    id="mySubmit">发表评论
            </button>
        </div>
    </div>
    <br/>

    <span>用户评论:<span style="background-color: #00bbd3" id="msg"></span></span>
    <br/>
    <br/>
    <ul id="comments_list">
        <div render-loop="list">
            <li class="comments">
                <div class="com_top">
                    <a data-href="userProfiles.html?id=" render-key="list.user.id" render-fun="getHref">
                        <img class="rounded-circle" width="17%" render-src="list.user.headImgUrl">
                    </a>
                    <br/>
                    <!--<img class="rounded-circle" width="17%" render-src="headImgUrl">-->
                </div>
                <span class="name" render-html="list.user.nickName"></span>
                    <span class="time" render-html="list.createTime"></span>
                <br/><br/>
                <div class="com_content" >
                    <p render-html="list.content"></p>
                </div>
                <hr/>

                <div class="com_bottom">
                    <!--<span class="useful">
                         <span class="like_num">1</span>有用
                    </span>-->
                </div>
                <br/>
            </li>
        </div>

    </ul>
</div>


<script>

    var params = getParams();

    $.get("/dailies/"+params.id,function (data) {
        $(".articles").renderValues(data,{
            getUrl: function (item,value) {
                $(item).attr("href", $(item).data("href") + value)
            }
        });
    });




</script>
</body>

</html>